import React from 'react';
import { Card, Typography, Progress } from 'antd';
import './darkTheme.css';

const { Title, Paragraph, Text } = Typography;

const PositionManagement: React.FC = () => {
  // 自定义卡片样式
  const cardStyle = {
    backgroundColor: '#112240',
    borderColor: '#233554',
    marginBottom: '20px',
  };
  
  const cardHeadStyle = {
    backgroundColor: '#112240',
    borderBottomColor: '#233554',
  };
  
  const cardBodyStyle = {
    backgroundColor: '#112240',
  };

  return (
    <div style={{ padding: '20px' }}>
      <Card 
        title="仓位管理原则" 
        style={cardStyle}
        headStyle={cardHeadStyle}
        bodyStyle={cardBodyStyle}
        className="dark-theme-card"
      >
        <Typography style={{ color: '#ccd6f6' }}>
          <Title level={4} style={{ color: '#ccd6f6' }}>仓位分配策略</Title>
          <Paragraph>
            <ul>
              <li>根据市场环境调整总体仓位</li>
              <li>单只股票仓位不超过总资金的20%</li>
              <li>同一板块股票总仓位不超过40%</li>
              <li>高风险股票控制在较低仓位</li>
              <li>资金分批进场，避免一次性满仓</li>
            </ul>
          </Paragraph>
          
          <div style={{ marginBottom: '20px' }}>
            <Text style={{ display: 'block', marginBottom: '10px' }}>市场强势期仓位配置</Text>
            <Progress percent={80} strokeColor="#64ffda" trailColor="#233554" />
          </div>
          
          <div style={{ marginBottom: '20px' }}>
            <Text style={{ display: 'block', marginBottom: '10px' }}>市场震荡期仓位配置</Text>
            <Progress percent={50} strokeColor="#64ffda" trailColor="#233554" />
          </div>
          
          <div style={{ marginBottom: '20px' }}>
            <Text style={{ display: 'block', marginBottom: '10px' }}>市场弱势期仓位配置</Text>
            <Progress percent={30} strokeColor="#64ffda" trailColor="#233554" />
          </div>
          
          <Title level={4} style={{ color: '#ccd6f6' }}>加仓原则</Title>
          <Paragraph>
            <ul>
              <li>趋势确认后分批加仓</li>
              <li>突破关键阻力位后加仓</li>
              <li>量能配合价格上涨时加仓</li>
              <li>加仓间隔不少于3个交易日</li>
            </ul>
          </Paragraph>
          
          <Title level={4} style={{ color: '#ccd6f6' }}>减仓原则</Title>
          <Paragraph>
            <ul>
              <li>盈利达到预期目标分批减仓</li>
              <li>趋势转弱信号出现时减仓</li>
              <li>市场整体风险加大时主动减仓</li>
              <li>个股基本面发生不利变化时减仓</li>
            </ul>
          </Paragraph>
        </Typography>
      </Card>
    </div>
  );
};

export default PositionManagement;